{include file="common/header"}
<div id="app" v-cloak>
    <el-curd
        ref="curd"
        :search-date="false"
        table-operation-width="130px"
        :search-keyword="false"
        :field="field">
        <template v-slot:button>
            <el-button 
                size="small" 
                icon="el-icon-plus" 
                type="primary" 
                @click="backup()"
                :loading="loading">
                <span class="title">{{loading ? '备份中，文件较大，可能需要几分钟...' : '数据库备份' }}</span>
            </el-button>
        </template>
        <template v-slot:operation="row">
            <a :href="admin_url('dbbackups/backups/download', {name: row.name})" target="_blank">下载</a>
        </template>
    </el-curd>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                field: [
                    {
                        prop: 'name', 
                        label: '文件名', 
                    },
                    {
                        prop: 'size', 
                        label: '文件大小', 
                    },
                    {
                        prop: 'create_time', 
                        label: '备份时间', 
                    },
                ],
                loading: false,
                backupUrl: "dbbackups/backups/back",
            }
        },
        methods: {
            /**
             * 备份
             */
            backup() {
                let self = this;
                self.loading = true;
                request.post(self.backupUrl, {}, function(res) {
                    self.loading = false;
                    if (res.status !== 'success') {
                        self.$notify({ showClose: true, message: res.message, type: res.status});
                    } else {
                        self.$refs.curd.getData();
                    }
                });
            },
            /**
             * 链接
             */
            admin_url(link = '') {
                return admin_url(link);
            }
        },
    })
</script>
{include file="common/footer"}